<template>
    <view style="position: relative">
        <swiper style="height: 420rpx" @change="onChange">
            <swiper-item v-for="items in iconInfos" class="slide slide1">
                <view class="button-group">
                    <view v-for="item in items" class="button-list" @click="onClick(item.path)">
                        <view class="button-icon">
                            <view class="fx" :class="[item.icon]"
                                :style="{ fontSize: item.iconSize, color: item.iconColor }"></view>
                        </view>
                        <view class="button-text">{{ item.name }}</view>
                        <view v-if="item.tag" class="tag">
                            {{ item.tag }}
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <l-swiper-dot :current="current" type="dot" :list="iconInfos"></l-swiper-dot>
    </view>
</template>

<script setup lang="ts">
    import {
        defineProps,
        withDefaults,
        computed,
        ref,
        ComputedRef,
    } from 'vue';
    import {
        functionButtonGroupProps,
        defaultIconInfo,
        iconInfo
    } from '@/props.ts';
    const props = withDefaults(defineProps<functionButtonGroupProps>(), {
        iconInfo: () => [defaultIconInfo]
    });

    const iconInfos : ComputedRef<iconInfo[][]> = computed(() => {
        const objs : iconInfo[][] = [];
        let current : iconInfo[] = [];
        props.iconInfo.forEach((item, index) => {
            const merged = {
                ...defaultIconInfo,
                ...item,
            };
            // 当当前元素达到8个或者已经是最后一个元素时
            current.push(merged);
            if (current.length === 8 || index === props.iconInfo.length - 1) {
                objs.push(current);
                current = [];
            }
        });
        console.log(objs)
        return objs;
    });
    const current = ref(0);
    const onClick = (path : string) => {
        if (path) {
            uni.navigateTo({
                url: path
            })
        }

    };
    const onChange = (e : any) => {
        current.value = e.detail.current;
    };
</script>

<style lang="scss">
    .swiper-box {
        .swiper-item {
            border: 1px #000 solid;
            height: 100%;

            width: 100%;
            // background-color: #EDEDFF;
        }
    }


    .button-group {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        row-gap: 40rpx;
        width: 100%;

        .button-list {
            position: relative;
            @include flex-center(column);

            .tag {
                position: absolute;
                top: 0;
                background-color: #a9a8d3;
                border-radius: 20rpx;
                color: #fff;
                font-size: 16rpx;
                padding: 5rpx 8rpx;
                left: 100rpx;
            }
        }
    }

    .button-icon {
        background: radial-gradient(circle farthest-corner, #FFFFFF 0%, #EDEDFF 20%, #FFFFFF 100%), #F7F7F9;

        width: 103rpx;
        height: 102rpx;
        box-shadow: 3rpx 0rpx 1rpx 0rpx #fff;
        border-radius: 30rpx 30rpx 30rpx 30rpx;
        @include flex-center;


    }

    .button-text {
        color: #433D59;
        font-size: 25rpx;
        margin-top: 15rpx;
        font-weight: bold;
    }
</style>